<template>
  <div style="position: relative" class="mylogin">
    <router-link to="/register">
      <van-nav-bar
        fixed
        title="登录"
        right-text="注册"
        class="navLogin"
      ></van-nav-bar>
    </router-link>
    <img
      src="http://www.zlllcy.com/fuben/f7.png"
      alt=""
      class="topimg"
    />

    <!-- 登录框 -->
    <div class="login">
      <van-cell-group>
        <!-- 姓名框 -->
        <div style="display: flex" class="username">
          <van-icon name="manager" color="gray" size="1.2rem" class="img" />
          <van-field
            style="display: flex"
            v-model="phone"
            :border="true"
            label="手机号"
            placeholder="请输入您的手机号"
            maxlength="11"
          />
        </div>
        <!-- 密码框 -->
        <div class="pwd">
          <van-icon name="lock" color="gray" size="1.2rem" class="img1" />
          <van-field
            v-if="isShow"
            v-model="pwd"
            type="password"
            @blur.native.capture="checkPwd"
            :state="pwdState"
            label="密码"
            placeholder="请输入6到15位数字"
            maxlength="15"
          />
          <van-field
            v-else
            v-model="pwd"
            @blur.native.capture="checkPwd"
            :state="pwdState"
            label="密码"
            placeholder="请输入6到15位数字"
            maxlength="15"
          />
          <van-icon
            v-if="isReg"
            class="eye"
            name="closed-eye"
            @click="eye"
            size="1.5rem"
          />
          <van-icon
            v-else
            class="eye"
            name="eye-o"
            @click="eye"
            size="1.5rem"
          />
        </div>
      </van-cell-group>

      <!-- 登录按钮 -->
      <van-button
        class="btnlogin"
        type="primary"
        :disabled="checked == false"
        @click="checkLogin"
        size="large"
        >登录</van-button
      >

      <!-- 验证  忘记密码 -->
      <div>
        <router-link to="/code" class="codeLogin bgred">验证码登录</router-link>
        <router-link to="/forgetpwd" class="forgetPwd bgred"
          >忘记密码?</router-link
        >
      </div>

      <!-- 同意隐私协议 -->
      <div class="my-checkbox">
        <van-checkbox v-model="checked" shape="square" class="checkbox"
          >同意
          <a href="javascript:;" class="bgred">《隐私权政策》</a>
        </van-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      isClick: true,
      phone: "",
      pwd: "", //用于密码框做双向数据绑定
      pwdState: "",
      checked: false,
      isShow: true, //默认显示密码框
      isReg: true, //默认显示闭眼
      disabled: false,
    };
  },
  methods: {
    //点击眼睛切换显示或隐藏密码
    eye() {
      this.isReg = !this.isReg;
      if (this.isReg == true) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    checkPwd() {
      //验证密码是否符合要求
      let reg = /^\w{6,15}$/; //6到15位数字
      if (reg.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },
    //登录表单验证
    checkLogin() {
      // 判断手机号是否为空
      if (this.phone == "") {
        this.$toast("手机号不能为空！");
        return;
      }
      // 发送post请求，传递参数：phone upwd
      // console.log(this.phone, this.pwd);
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg.test(this.phone)) {
        this.axios
          .post("/user/login", `phone=${this.phone}&upwd=${this.pwd}`)
          .then((res) => {
            // console.log(res);
            this.uid = res.data.result[0].uid;
            // console.log(this.uid);
            if (res.data.code == 200) {
              //登录成功之后生成随机数
              let token = "";
              token = Math.random().toString().slice(-15);
              sessionStorage.setItem("token", token);
              // 当登录成功后，调用VueX里面mutations下的loginOk方法，修改登录状态，并渲染页面
              this.$store.commit("loginOK", this.uid);
              // 把islogin和uid存到sessionStorage
              sessionStorage.setItem("islogin", true);
              sessionStorage.setItem("uid", this.uid);
              sessionStorage.setItem("phone", this.phone);
              // console.log(this.uid);
              //登录成功
              this.$toast("登录成功");
              this.$router.push("/");
              Toast("当前定位城市：" + "上海市");
            } else if (res.data.code == 201) {
              //用户不存在
              this.$toast("登录失败,用户不存在或者密码不正确");
            }
          });
      } else {
        this.$toast("输入正确的手机号");
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/scss/public.scss";

// 顶部的图片
.topimg {
  margin-top: 50px;
}

// 底部的文字为红色
.bgred {
  color: #e1251b;
}

.mylogin {
  // 密码框跟姓名框公告样式
  // nav"注册样式"
  // .van-nav-bar__text {
  //   color: $colorFontWhite !important;
  // }
  //  .van-nav-bar__title{
  //     color: $colorFontWhite !important;
  //   }
  .login {
    position: relative;
    margin-top: 250px;
    padding-top: 15px;
    box-sizing: border-box;
    height: 11rem;
    .pwd,
    .username {
      display: flex;
      padding-left: 20px;
    }
    // top: 5rem !important;
    left: 0.8rem !important;
    text-align: center;
    width: 90%;
    background-color: $colorFontWhite;
  }
  .img {
    position: absolute;
    top: 15px;
    left: 10px;
    margin-top: 0.3rem !important;
    margin-left: 0.1rem;
    font-size: 0.8rem !important;
  }
  .img1 {
    position: absolute;
    top: 56px;
    z-index: 1;
    left: 10px;
    font-size: 0.8rem !important;
  }
  .eye {
    position: absolute;
    top: 58px;
    margin-top: 0.3rem !important;
    margin-left: 12.5rem;
    font-size: 16px !important;
  }

  .codeLogin {
    margin-right: 6.5rem;
    font-size: 12px;
  }

  .forgetPwd {
    font-size: 12px;
  }
  img {
    width: 100%;
  }
  .icon {
    margin-right: 15rem !important;
    margin-top: 15rem !important;
  }
  // lable宽度
  .van-field__label {
    width: 3.2em !important;
  }
  // // 顶部"注册"样式
  // .van-nav-bar__text {
  //   color: $colorFontWhite !important;
  // }
  /* 标题 */
  .navLogin {
    color: $colorFontWhite !important;
  }
  .van-nav-bar {
    background-color: $colorTp !important;
  }

  .van-button {
    border-radius: 10% !important;
    width: 90% !important;
  }
  .van-button--large {
    width: 80% !important;
    height: 35px !important;
    border-radius: 5px !important;
    color: $colorFontWhite !important;
    margin-top: 5% !important;
  }
  /* 返回顶部按钮 */
  .van-nav-bar__left {
    margin-bottom: 1rem;
  }
  .van-nav-bar .van-icon {
    color: $colorFontWhite !important;
    margin-bottom: 0rem !important;
  }
  .van-icon {
    margin-top: 0.01rem !important;
  }
  // 复选框样式
  .van-checkbox__icon {
    margin-bottom: 1rem;
    //  font-size: $fontSize14 !important;
    margin-top: 17px;
  }
  // "同意"样式
  .van-checkbox__label {
    //  font-size: $fontSize12 !important;
    margin-bottom: 0.2rem;
  }
  .my-checkbox {
    position: absolute;
    right: 30%;
  }
  .checkbox {
    margin-top: 6%;
    border-radius: 5px;
    font-size: 16px;
  }
  .agree {
    margin-top: 0.6rem !important;
    font-size: 0.2rem !important;
    margin-left: 0.2rem;
  }

  .btnlogin {
    margin: 0 auto !important;
    display: block !important;
    margin-top: 1rem !important;
    background-color: #1989fa;
    border: none;
    color: #666;
  }
  .checkbox {
    width: 100%;
    margin-top: 40px;
  }
  .van-cell {
    margin-left: 10px !important;
  }
  .login {
    position: absolute;
    top: -3.2rem;
    left: 0.5rem;
    width: 90%;
    background-color: $colorWhite;
    border-radius: 0.3125rem;
  }
  a {
    color: $colorFontOrg;
  }
}

// .checkbox{
//      margin-top: 6%;
//     //  margin-left: 30%;
//      border-radius: 5px;
//   }
</style>